<!DOCTYPE html>
<html>

	<head>
		<meta charset="{CHARSET}">
		<title></title>

		<style type="text/css">
			.a {
				background-color: #000;
				color: #fff;
				padding: 20px;
				margin: 10px;
			}
		</style>
	</head>

	<body>

		<div id="tree1"></div>
		<div id="tree2"></div>
		<div id="tree3"></div>
		<div id="tree4"></div>
		<div id="tree5"></div>

		<script src="js/jq.js"></script>

		<script type="text/javascript">
			$(function() {

				function JqDom插入() {
					$("<li>").addClass("a").attr("id", 1).html("44444444444444").appendTo($("#tree1"))
				}

				function JqStr插入() {
					$("#tree2").append("<li class='a' id=1>44444444444444</li>")
//					$().appendTo($("#tree2"))
				}

				function 原始Dom插入() {

					var li = document.createElement("li")

					li.className = "a"
					li.innerHTML = "44444444444444"
					li.id = 1

					document.getElementById("tree3").appendChild(li)
				}

				function 原始Str插入() {
					var str = "<li class='a' id=1>44444444444444</li>"

					document.getElementById("tree4").appendChild(parseToDOM(str))
					//					document.getElementById("tree").innerHTML += str
				}

				function 封装插入() {

					createDom({
						nodeName: "li",
						className: "a",
						attr: {
							id: 1
						},
						child: 44444444444444,
						parent: "#tree5"
					})
				}

				function createDom(domObj) {

					var domName = domObj.nodeName;
					var className = domObj.className,
						attr = domObj.attr,
						child = domObj.child,
						_className = "class=",
						_attr = "";
					
					if(typeof className=="string"){
						_className+=className
					}else{
						for(var i = 0; i < className.length; i++) {
							_className += (className[i] + " ")
						}
					}

					for(var j in attr) {
						_attr += ` ${j}= ${attr[j]} `
					}

					var dom = `<${domName} ${_className} ${_attr}>${child}<${domName}/>`

					$(domObj.parent).append(dom)

				}

				function parseToDOM(str) {
					var div = document.createElement("div");
					if(typeof str == "string")
						div.innerHTML = str;
					return div.childNodes[0];
				}

				setTimeout(function() {
					console.time("JqDom插入")
					JqDom插入()
					console.timeEnd("JqDom插入")
				}, 2900)

				setTimeout(function() {
					console.time("JqStr插入")
					JqStr插入()
					console.timeEnd("JqStr插入")
				}, 3900)

				setTimeout(function() {
					console.time("封装插入")
					封装插入()
					console.timeEnd("封装插入")
				}, 4900)

				setTimeout(function() {
					console.time("原始Dom插入")
					原始Dom插入()
					console.timeEnd("原始Dom插入")
				}, 5900)

				setTimeout(function() {
					console.time("原始 Str 插入")
					原始Str插入()
					console.timeEnd("原始 Str 插入")
				}, 6900)

			})
		</script>
	</body>

</html>